<template>
    <view class="content an-login w100 w100">
		<view class="an-logo">
			<h1>登录</h1>
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="input-group">
				
				<view class="input-row border">
					<input class="uni-input" type="text" focus v-model="account" placeholder="请输入账号" />
				</view>
				<view class="input-row border">
					<input class="uni-input" type="password" displayable v-model="password" confirm-type="done" placeholder="请输入密码" />
				</view>
			</view>
		
			<view class="btn-row">
				<button type="primary" :loading="btnLoading" class="primary an-btn-yuan an-Gradients" form-type="submit" >登录</button>
			</view>
		</form>
        <!-- <view class="action-row">
            <navigator url="../reg/reg">注册账号</navigator>
            <text>|</text>
            <navigator url="../pwd/pwd">忘记密码</navigator>
        </view> -->
        <!-- <view class="oauth-row" v-if="hasProvider" v-bind:style="{top: positionTop + 'px'}">
            <view class="oauth-image" v-for="provider in providerList" :key="provider.value">
                <image :src="provider.image" @tap="oauth(provider.value)"></image>
            </view>
        </view> -->
		<!-- <view class="image-content" v-bind:style="{top: positionTop + 12 + 'px'}">
			<image style="width: 100%" :mode="'widthFix'" :src="src"
				@error="imageError"></image>
		</view> -->
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import mInput from '../../components/m-input.vue'
	import graceChecker from '../../common/graceChecker.js'
	import md5 from '../../common/md5.js'
	import {isEmpty} from '@/common/graceChecker.js'
    export default {
        components: {
            mInput
        },
        data() {
            return {
                providerList: [],
                hasProvider: false,
                account: '',
                password: '',
                positionTop: 0,
				src: '/static/img/logo_bg.png',
				btnLoading: false	// 按钮状态
            }
        },
        computed: mapState(['forcedLogin']),
		onReady() {
		    this.initPosition();
		    this.initProvider();
			this.anLoad();
		},
        methods: {
            ...mapMutations(['login']),
			anLoad(){
				if(process.env.NODE_ENV === 'development'){
					this.account = 'admin';
					this.password = '123456';
				}
			},
			formSubmit(){	// 表单提交  登录
				this.bindLogin()
			},
			formReset(){	// 表单重置
				
			},
            initProvider() {
                const filters = ['weixin', 'qq', 'sinaweibo'];
                uni.getProvider({
                    service: 'oauth',
                    success: (res) => {
                        if (res.provider && res.provider.length) {
                            for (let i = 0; i < res.provider.length; i++) {
                                if (~filters.indexOf(res.provider[i])) {
                                    this.providerList.push({
                                        value: res.provider[i],
                                        image: '../../static/img/' + res.provider[i] + '.png'
                                    });
                                }
                            }
                            this.hasProvider = true;
                        }
                    },
                    fail: (err) => {
                        console.error('获取服务供应商失败：' + JSON.stringify(err));
                    }
                });
            },
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
            bindLogin() {
				if(graceChecker.isEmpty(this.account) || graceChecker.isEmpty(this.password)){
					uni.showToast({
					    icon: 'none',
					    title: '账号和密码不能为空'
					});
					return;
				}
				
				const data = {
					username: this.account,
					password: md5(this.password)
				}
				this.btnLoading = true
				this.$api.login(data).then(res=>{	// 登录
					this.btnLoading = false
					if(!isEmpty(res)){
						this.$store.commit('login', res)	// 存储用户信息
						uni.reLaunch({
						    url: '../user/user',
						});
					}else{
						uni.showToast({
						    icon: 'none',
						    title: '登录失败'
						});
						
					}
				}).catch(e=>{
					this.btnLoading = false
					
					
				})
            },
            oauth(value) {
                uni.login({
                    provider: value,
                    success: (res) => {
                        uni.getUserInfo({
                            provider: value,
                            success: (infoRes) => {
                                /**
                                 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
                                 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
                                 */
                                this.toMain(infoRes.userInfo.nickName);
                            }
                        });
                    },
                    fail: (err) => {
                        console.error('授权登录失败：' + JSON.stringify(err));
                    }
                });
            },
            toMain(userName) {
                this.login(userName);
                /**
                 * 强制登录时使用reLaunch方式跳转过来
                 * 返回首页也使用reLaunch方式
                 */
                if (this.forcedLogin) {
                    uni.reLaunch({
                        url: '../main/main',
                    });
                } else {
                    uni.navigateBack();
                }

            }
        },
        
    }
</script>

<style>
	.an-login{
		padding: 0;
		font-size: 28rpx;
		overflow: hidden;
		background: #FFFFFF url(../../static/img/logo_bg.png) no-repeat;
		background-size: 100% auto;
		background-position: bottom;
	}
	.an-logo{
		padding: 60rpx 0;
		margin: 0 auto;
	}
	.an-login .input-group{
		padding: 10rpx 20rpx;
	}
	.an-login .input-group::before{
		height: 0;
	}
	.an-login .input-group::after{
		height: 0;
	}
	.an-login .input-row{
		margin-bottom: 1px;
	}
	.an-login .image-content {
		width: 100%;
		position: absolute;
	}
	.an-login .btn-row{
		padding: 20upx 80upx;
	}
	.an-login .btn-row .an-btn-yuan{
		box-shadow: 0px 10px 8px #c9c9c9;
	}
    .action-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .action-row navigator {
        color: #007aff;
        padding: 0 20upx;
    }

    .oauth-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .oauth-image {
        width: 100upx;
        height: 100upx;
        border: 1upx solid #dddddd;
        border-radius: 100upx;
        margin: 0 40upx;
        background-color: #ffffff;
    }

    .oauth-image image {
        width: 60upx;
        height: 60upx;
        margin: 20upx;
    }
</style>
